<template>
  <view class="brand-intro" v-cloak>
    <view class="intro-header">
      <image src="@/static/gray.jpg" mode="aspectFill" class="logo"></image>
    </view>
    <view class="intro-store">
      <h2>贝洁口腔门诊汉口店</h2>
      <view class="store-rate">
        <uni-rate value="4" size="14"></uni-rate>
        <view><span class="theme-color">200</span> 粉丝</view>
      </view>
      <view class="store-list">
        <view class="list-item"> <uni-icons type="checkbox" size="16" color="#b0b0b0"></uni-icons> 品牌连锁</view>
        <view class="list-item"> <uni-icons type="checkbox" size="16" color="#b0b0b0"></uni-icons> 一站式服务</view>
        <view class="list-item"> <uni-icons type="checkbox" size="16" color="#b0b0b0"></uni-icons> 优质口碑</view>
      </view>
    </view>
    <view class="intro-service">
      <view class="intro-title">服务环境</view>
      <view class="service-imgs not-bar">
        <image src="@/static/gray.jpg" mode="aspectFill" v-for="(item,idx) in 5" :key="idx" class="img"></image>
      </view>
    </view>
    <view class="intro-branch">
      <view class="intro-title">品牌分店</view>
      <view class="branch-list">
        <view class="list-item" v-for="(item,idx) in 3" :key="idx">
          <image src="@/static/gray.jpg" mode="aspectFill" class="img"></image>
          <view class="item-info">
            <h2>爱尚大众口腔（保利花园店）</h2>
            <uni-rate value="4" size="14"></uni-rate>
            <view class="info-footer">
              <view>口腔医疗机构</view>
              <view>867m</view>
            </view>
          </view>
        </view>
      </view>
      <view class="more">查看全部分店 <uni-icons type="right" style="margin-left: 4rpx;" size="14" color="#B0B0B0"></uni-icons> </view>
    </view>
    <view class="intro-service">
      <view class="intro-title">特色项目</view>
      <image src="@/static/gray.jpg" mode="aspectFill" class="ad"></image>
    </view>
    <view class="intro-main">
      <view class="intro-title">品牌介绍</view>
      <view class="main-about">
        <view class="main-title"><image src="@/static/gray.jpg" mode="aspectFill" class="img"></image> 关于品牌</view>
        <view class="about-list">
          <view class="list-item">成立时间：2027年08月28日</view>
          <view class="list-item">门店数量：57家</view>
          <view class="list-item">员工数量：1380人</view>
          <view class="list-item">门店规模：16000平方米</view>
        </view>
      </view>
      <view class="main-story">
        <view class="main-title"><image src="@/static/gray.jpg" mode="aspectFill" class="img"></image> 品牌故事</view>
        <image src="@/static/gray.jpg" mode="aspectFill" class="story-ad"></image>
        <view class="story-p dot3">大众口腔成立于2007年，是一家专注口腔大众口腔成立于2007年，是一家专注口腔大众口腔成立于2007年，是一家专注口腔大众口腔成立于2007年，是一家专注口腔大众口腔成立于2007年，是一...</view>
        <view class="more">展开全部 <uni-icons type="bottom" style="margin-left: 4rpx;" size="14" color="#B0B0B0"></uni-icons> </view>
      </view>
      <view class="main-honor">
        <view class="main-title"><image src="@/static/gray.jpg" mode="aspectFill" class="img"></image> 品牌荣誉</view>
        <view class="honor-imgs not-bar">
          <image src="@/static/gray.jpg" mode="aspectFill" v-for="(item,idx) in 5" :key="idx" class="img"></image>
        </view>
      </view>
      <view class="main-story">
        <view class="main-title"><image src="@/static/gray.jpg" mode="aspectFill" class="img"></image> 服务理念</view>
        <view class="story-p dot3" style="margin-top: 20rpx;">大众口腔成立于2007年，是一家专注口腔大众口腔成立于2007年，是一家专注口腔大众口腔成立于2007年，是一家专注口腔大众口腔成立于2007年，是一家专注口腔大众口腔成立于2007年，是一...</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="less" scoped>
.brand-intro{
  .intro-title{
    line-height: 88rpx;
    font-size: 28rpx;
    color: var(--title-color);
  }
  .intro-header{
    height: 282rpx;
    background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
    margin-bottom: 89rpx;
    position: relative;
    .logo{
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      border: 10rpx solid #fff;
      position: absolute;
      bottom: -80rpx;
      left: 50%;
      transform: translate(-50%,0);
    }
  }
  
  .intro-store{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40rpx;
    h2{
      font-size: 32rpx;
      color: var(--title-color);
      font-weight: bold;
    }
    .store-rate{
      display: flex;
      align-items: center;
      font-size: 24rpx;
      margin: 12rpx 0;
      .theme-color{
        margin-left: 20rpx;
        margin-right: 4rpx;
      }
    }
    .store-list{
      display: flex;
      .list-item{
        display: flex;
        align-items: center;
        font-size: 20rpx;
        color: #6D6D6D;
        margin-right: 24rpx;
      }
    }
  }  // intro-store end
  
  .intro-service{
    padding:0 24rpx 24rpx;
    border-top: 20rpx solid var(--page-bg);
    .service-imgs{
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      overflow-x: auto;
      .img{
        width: 226rpx;
        height: 153rpx;
        margin-right: 12rpx;
        border-radius: 12rpx;
        flex-shrink: 0;
      }
    }
    .ad{
      height: 150rpx;
      width: 100%;
      border-radius: 20rpx;
    }
  }
  
  .intro-branch{
    padding:0 24rpx 24rpx;
    border-top: 20rpx solid var(--page-bg);
    .branch-list{
      .list-item{
        padding: 24rpx 0;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid #efefef;
        .img{
          width: 124rpx;
          height: 124rpx;
          margin-right: 24rpx;
          border-radius: 20rpx;
        }
        .item-info{
          flex: 1;
          h2{
            font-size: 26rpx;
            color: var(--title-color);
            margin-bottom: 20rpx;
          }
          .info-footer{
            margin-top: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24rpx;
            color: var(--sub-title);
          }
        }
      }
    }
  }
  
  .intro-main{
    padding:0 24rpx 24rpx;
    border-top: 20rpx solid var(--page-bg);
    .main-title{
      display: flex;
      align-items: center;
      font-size: 28rpx;
      .img{
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
    .main-about{
      padding: 24rpx 0;
      border-bottom: 2rpx solid #efefef;
      .about-list{
        display: flex;
        flex-wrap: wrap;
        .list-item{
          width: 50%;
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #6D6D6D;
        }
      }
    }
    .main-story{
      padding: 24rpx 0;
      border-bottom: 2rpx solid #efefef;
      .story-ad{
        width: 100%;
        height: 374rpx;
        border-radius: 20rpx;
        margin: 20rpx 0;
        display: block;
      }
      .story-p{
        line-height: 40rpx;
        font-size: 24rpx;
        color: var(--title-color);
      }
    }
    .main-honor{
      padding: 24rpx 0;
      border-bottom: 2rpx solid #efefef;
      .honor-imgs{
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-top: 20rpx;
        .img{
          width: 226rpx;
          height: 153rpx;
          margin-right: 12rpx;
          border-radius: 12rpx;
          flex-shrink: 0;
        }
      }
    }
    
  }  // intro-main end
  
  .more{
    line-height: 88rpx;
    font-size: 22rpx;
    color: #6D6D6D;
    text-align: center;
  }
}
</style>
